<template>
    <div class="list">
<!--        选择-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="年级：">
                <el-select v-model="formInline.region" placeholder="活动区域">
                    <el-option v-for="item,index in options" :label="item.label" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="hh">查询</el-button>
            </el-form-item>
        </el-form>
<!--        表格-->
        <div style="width:99%">
            <el-table
                    :data="tableData"
                    border>
                <el-table-column
                        prop="id"
                        label="id"
                        width="130">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="标题">
                </el-table-column>
                <el-table-column
                        prop="gradeLevel"
                        label="学籍"
                        width="475">
                    <template slot-scope="scope">
                        <div v-for="item in options" :key="item.id">
                            <span v-show="item.id==scope.row.gradeLevel?true:false">{{item.label}}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="createUserName"
                        label="发送人"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="operation"
                        label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="compile(scope.row.id)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="remove(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block" style="margin-top:20px;">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[5, 10, 30, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="zong">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                currentPage4:1,
                pageSize:10,
                zong:10,
                //任务列表数据
                tableData: [],
                //查询的值
                formInline:{
                    region:""
                },
                options: [
                    {id:1,
                    value: '选项1',
                    label: '一年级'
                },
                    {
                    id:2,
                        value: '选项2',
                    label: '二年级'
                },
                    {
                        id:3,
                        value: '选项3',
                    label: '三年级'
                },
                    {
                        id:4,
                        value: '选项4',
                    label: '四年级'
                },
                    {
                        id:5,
                        value: '选项5',
                    label: '五年级'
                },
                    {
                        id:6,
                    value: '选项6',
                    label: '六年级'
                },
                    {
                        id:7,
                    value: '选项7',
                    label: '初一'
                },
                    {
                        id:8,
                    value: '选项8',
                    label: '初二'
                },
                    {
                        id:9,
                    value: '选项9',
                    label: '初三'
                },
                    {
                        id:10,
                    value: '选项10',
                    label: '高一'
                },
                    {
                        id:11,
                    value: '选项11',
                    label: '高二'
                },
                    {
                        id:12,
                    value: '选项12',
                    label: '高三'
                }],
            }
        },
        mounted() {
            let obj = {
                "gradeLevel": null,
                "pageIndex": 1,
                "pageSize": 10
            }
            this.data1(obj)
        },
        methods:{
            // 获取数据
            data1(obj){
                this.axios({
                    url:"/api/admin/task/page",
                    method:"post",
                    data:obj
                }).then(res=>{
                    if(res.data.code == 1){
                        this.zong = res.data.response.total;
                        this.tableData = res.data.response.list;
                    }
                })
            },
            //查询
            hh(){
                let obj = {
                    "gradeLevel": this.formInline.region,
                    "pageIndex": 1,
                    "pageSize": 10
                }
                this.data1(obj)
            },
            //跳转编辑页面
            compile(id){
                this.$router.push("/task/edit?id="+id)
            },
            //删除当前信息
            remove(item){
                this.axios({
                    url:"/api/admin/task/delete/"+item.id,
                    method:"post",
                }).then(res=>{
                   if(res.data.code ==1){
                       let obj = {
                           "gradeLevel": null,
                           "pageIndex": 1,
                           "pageSize": 10
                       }
                       this.data1(obj)
                   }
                })
            },
            //当前页
            handleSizeChange(val){
                let obj = {
                    "gradeLevel": null,
                    "pageIndex": 1,
                    "pageSize": val
                }
                this.data1(obj)
            },
            //当前页的数量
            handleCurrentChange(val){
                let obj = {
                    "gradeLevel": null,
                    "pageIndex":val,
                    "pageSize": 10
                }
                this.data1(obj)
            }
        }
    }
</script>
<style lang="scss" scoped>
    .list{
        padding:0 20px 20px 20px;
        overflow: hidden;
    }
    .el-form{
        display:flex;
    }
    .el-form-item{
        display:flex !important;
        align-items: center!important;
    }
    .el-input__inner{
        height:36px !important
    }
    .el-form-item__label::before{
        content: '*' !important;
        color: #F56C6C !important;
        margin-right: 4px !important;
    }
    .el-select{
        width:230px;
        height:36px;
        border-radius: 4px;
        line-height:36px !important;
        padding:0 30px 0 15px;
    }
</style>